<template>
    <div class="specialist">
        <div class="specialist-box">
            <SectionTitle
                en="SPECIALIST"
                title="专家推荐"
                meta="specialist recommendation"
            />
            <!-- <SectionSearch
        path="/user/consultation/centerSpecialist"
        placeholder="请输入你要查找的信息"
      /> -->
            <div class="more-box">
                <el-link
                    :underline="false"
                    type="primary"
                    href="/user/consultation/centerSpecialist"
                >更多<i class="el-icon-arrow-right"></i></el-link>
            </div>
            <div class="swiper-box">
                <swiper
                    :options="swiperOptions"
                    ref="specialistSwiper"
                >
                    <swiper-slide
                        v-for="item in slideList"
                        :key="item.index"
                        @click.native="slideClick(item)"
                    >
                        <div class="doctor-info">
                            <img
                                :src="item.img"
                                alt=""
                                class="doctor-info__img"
                            />
                            <span class="doctor-info__name">{{ item.name }}</span>
                            <span class="doctor-info__text">{{ item.institutionName }}</span>
                            <span class="doctor-info__text">{{ item.education }}</span>
                            <!-- <span class="doctor-info__text">在线咨询：990元</span>
              <span class="doctor-info__text">切片会诊：1000元</span>
              <span class="doctor-info__text">切片+免疫组化：1900元</span> -->
                        </div>
                    </swiper-slide>
                    <div
                        class="prev el-icon-arrow-left"
                        slot="button-prev"
                    ></div>
                    <div
                        class="next el-icon-arrow-right"
                        slot="button-next"
                    ></div>
                </swiper>
            </div>
        </div>
    </div>
</template>

<script>
import { $_searchFrontDoctor } from '@/network/service'
import SectionTitle from './SectionTitle'
import SectionSearch from './SectionSearch'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  components: {
    SectionTitle,
    SectionSearch,
    swiper,
    swiperSlide
  },
  data() {
    return {
      slideList: [],
      swiperOptions: {
        //小手掌抓取滑动
        grabCursor: true,
        slidesPerView: 4,
        // 循环
        loop: false,
        // 设定初始化时slide的索引
        initialSlide: 0,
        //自动播放
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        },
        // 滑动速度
        speed: 800,
        navigation: {
          nextEl: '.next',
          prevEl: '.prev'
        }
      }
    }
  },
  computed: {
    specialistSwiper() {
      return this.$refs.specialistSwiper.swiper
    }
  },
  mounted() {
    this.$_searchFrontDoctor()
  },
  methods: {
    prev() {
      this.specialistSwiper.slidePrev()
    },
    next() {
      this.specialistSwiper.slideNext()
    },
    slideClick(item) {
      this.$router.push({
        path: '/user/consultation/centerSpecialist',
        query: {
          name: encodeURIComponent(item.name)
        }
      })
    },
    async $_searchFrontDoctor() {
      const res = await $_searchFrontDoctor({
        isRecommend: 0,
        page: 0,
        size: 6
      })
      if (res.code === 200) {
        this.slideList = res.userListFront.content.map(n => ({
          ...n,
          img: process.env.VUE_APP_ImageServiceURL + n.headUrl
        }))
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.more-box {
  display: flex;
  flex-direction: row-reverse;
}
.specialist {
  background-color: #f7f8fb;
}
.specialist-box {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 28px;
}

.swiper-box {
  padding-top: 38px;
  .prev {
    left: 0;
  }
  .next {
    right: 0;
  }
  .prev.swiper-button-disabled,
  .next.swiper-button-disabled {
    // opacity: 0.2;
    // cursor: auto;
    // pointer-events: none;
    display: none;
  }
  .prev,
  .next {
    position: absolute;
    top: 72.5px;
    z-index: 10;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 38px;
    color: rgba(190, 190, 190, 1);
  }
}
.doctor-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  &__img {
    width: 145px;
    height: 145px;
    border-radius: 50%;
  }
  &__name {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    line-height: 48px;
  }
  &__text {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    line-height: 30px;
  }
}
</style>
